#library {
  width: 100%;

  header {
    >p {
      display: inline;
    }

    #syncNow {
      display: inline-block;
      cursor: pointer;

      &.ri-cloud-fill:hover::after {

        position: fixed;
        content: 'Import from cloud';
        font-size: small;
      }

      &.ri-cloud-off-fill:hover::after {
        position: fixed;
        content: 'Save to cloud';
        font-size: small;
      }

      &.ri-loader-3-line {
        pointer-events: none;
      }

      &.error {
        color: #f20a;
      }
    }
  }


  #superCollectionList {
    width: calc(100% - 2rem);
    background: var(--onBg);
    border-radius: var(--roundness);

    a.listItem {
      background: none;
      border: none;
    }

    a.clxn_item {
      display: flex;
      align-items: center;
      padding: 2vmin;

      i {
        margin-right: 2vmin;
      }
    }
  }

  #libraryActions {

    label {
      cursor: pointer;
    }

    input {
      display: none;
    }
  }
}


#superCollectionSelector {
  padding: 0 3vmin;
  margin: 0 2vmin 0;
}

input[type='radio'] {
  display: none;

  &:checked+label {
    background: var(--text);
    color: var(--bg);
    border: var(--border);
  }

  &+label {
    cursor: pointer;
    font-size: small;
    display: inline-block;
    padding: 1vmin 2vmin;
    margin: 1vmin 0;
    border-radius: var(--roundness);
  }

}